<template lang="pug">
.cp-role-func.view
  .fc-edit
    .fc-edit-btns.edit-btn(v-show="!editStatus")
      el-button(type="primary", plain, icon="el-icon-edit", size="mini", @click.native="editLimits") 编辑
    .fc-edit-btns.save-cancle-btn(v-show="editStatus")
      el-button(type="primary", plain, size="mini", @click.native="saveLimits") 保存
      el-button(type="info",plain, size="mini", @click.native="cancleLimits") 取消
  el-tree(
    v-show="editStatus"
    ref="tree"
    :data="editTree"
    node-key="id"
    @check-change="checkChangeNode"
    @node-expand="delayLocateTree"
    @node-click="delayLocateTree"
    show-checkbox
    :default-expand-all="true"
    :default-checked-keys="checked"
    :props="limitProps")
  el-tree(
    v-show="!editStatus"
    :data="viewTree"
    node-key="id"
    @node-click="delayLocateTree"
    @node-expand="delayLocateTree"
    :default-expand-all="true")
    span.custom-leaf(
      slot-scope="{ node, data }",
      :class="data.value ? 'focus-leaf' : ''",
      v-text="data.label")
</template>

<script>
import { deepCopy } from '@/utils';

export default {
  name: 'funcedit',
  props: {
    editData: Array,
    saveSucc: Boolean
  },
  data() {
    return {
      limitProps: {
        children: 'children',
        label: 'label',
        disabled: this.editStatus
      },
      checked: [],
      editTree: [],
      viewTree: [],
      backupTree: [],
      editStatus: false
    };
  },
  watch: {
    editData () {
      this.editTree = deepCopy(this.editData);
      this.viewTree = this.editTree;
      this.backupTree = deepCopy(this.editData);
      this.checked = this.getLimitChecked(this.editData);
      this.delayLocateTree();
    }
  },
  methods: {
    editLimits () {
      this.checked = this.getLimitChecked(this.editTree);
      this.editStatus = true;
    },
    cancleLimits () {
      this.editTree = this.backupTree;
      this.backupTree = deepCopy(this.editTree);
      this.viewTree = this.editTree;
      this.editStatus = false;
    },
    saveLimits () {
      this.backupTree = deepCopy(this.editTree);

      const tree = this.$refs.tree;
      const checkedKeys = tree.getCheckedKeys().filter(value => value);
      this.$emit('save', checkedKeys);
      this.editStatus = false;
    },
    checkChangeNode (node, checked) {
      if (typeof node.value === 'boolean') {
        node.value = checked;
      }
      this.locateTree();
    },
    locateTree () {
      // 增加特定类名
      const parentEleNodes = document.querySelectorAll('.el-tree>.el-tree-node>.el-tree-node__children>.el-tree-node');
      const childEleNodes = document.querySelectorAll('.el-tree>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__children>.el-tree-node');
      for (const node of parentEleNodes) {
        node.classList.add('el-p-pos-tree-node');
      }
      for (const node of childEleNodes) {
        node.classList.add('el-c-pos-tree-node');
      }
    },
    delayLocateTree () {
      setTimeout(() => {
        this.locateTree();
      }, 0);
    },
    // 取得默认勾选框，进行渲染
    getLimitChecked (treeList) {
      const treeChecked = [];
      for (const item of treeList) {
        if (item.value) {
          treeChecked.push(item.id);
        }
        if (item.children && item.children.length) {
          for (const task of item.children) {
            if (task.value) {
              treeChecked.push(task.id);
            }
            if (task.children && task.children.length) {
              for (const approval of task.children) {
                if (approval.value) {
                  treeChecked.push(approval.id);
                }
              }
            }
          }
        }
      }

      return treeChecked;
    },
  },
  computed: {
  }
};
</script>

<style lang="sass">
.cp-role-func
  position: relative
  overflow: auto
  .fc-edit
    position: absolute
    top: 8px
    right: 16px
    z-index: 99
    cursor: pointer
  .el-tree-node
    white-space: initial
  .el-p-pos-tree-node>.el-tree-node__children>.el-tree-node
    display: inline-block
  .el-c-pos-tree-node
    display: inline-block
  .el-tree-node:focus>.el-tree-node__content, .el-tree-node__content:hover
    background-color: transparent
  .custom-leaf
    font-size: 14px
    color: #606266
  .focus-leaf
    color: #409EFF
    font-weight: 600
  .el-tree__empty-block
    font-size: 12px
</style>
